import { useState, useRef, useEffect } from 'react'
import './App.css'

import Home from "./view/home/home"
import router from "./router/index"
import { useNavigate, NavLink, useRoutes, useLocation } from "react-router-dom"
import logoImg from './assets/img/logo.57933597.png'
import { Button, Checkbox, Form, Input, message, Space } from 'antd';


function App() {
  const [count, setCount] = useState(0)
  const title = useRef()
  const [pos, setPos] = useState('static')
  const [isTook, setTook] = useState(false)
  const [messageApi, contextHolder] = message.useMessage();

  const routerView = useRoutes(router)
  const navigate = useNavigate()
  const location = useLocation()
  // console.log("路由", location);


  // console.log(sessionStorage.getItem('setToken'));
  // 
  useEffect(() => {
    // console.log('1111111111111', !sessionStorage.getItem('setToken'));
    setTook(sessionStorage.getItem('setToken'))
  }, [sessionStorage.getItem('setToken')])

  const logout = () => {
    messageApi.open({
      type: 'success',
      content: '账号已退出!',
    });
    // 清理状态管理和本地登录状态
    sessionStorage.removeItem("setToken")
    // 提示已退出

    // 如果当前是购物车页就跳回到主页
    if (location.pathname == "/shopCar") {
      setTimeout(() => {
        navigate("/")
      }, 2000)
    }
  }


  return (
    <div className="App">
      {contextHolder}

      <div className="title " ref={title}>
        <div className="title-center">
          <div className="title-top">
            <div className="icon">
              <img src={logoImg} alt="" />
            </div>

            <div className={pos == 'fixed' ? 'inp searchBottom' : 'inp searchtop'}>
              {/* <el-input @keyup.native.enter="search" placeholder="请输入想要的商品" v-model.trim="input" className="input-with-select">

              <el-button slot="append" icon="el-icon-search" onClick="sousuo" ref="btn">搜索</el-button>
            </el-input> */}
            </div>

          </div>
          {
            isTook ?
              <div className="title-bottom" >
                <NavLink to="/home">首页</NavLink>
                <NavLink to="/shopCar">购物车</NavLink>
                <a href="#" onClick={logout}>退出登录</a>
              </div>
              :
              <div className="title-bottom" >
                <NavLink to="/home">首页</NavLink>
                <NavLink to="/login">登录</NavLink>
                <NavLink to="/register">注册</NavLink>
              </div>
          }



        </div>
      </div>




      <div className="app-center">

        {/* <div className={pos == 'fixed' && true} style="width: 100%;height: 160px;"></div> */}



        {routerView}

      </div>



    </div >
  )
}

export default App
